<template>
	<view>
		<uni-nav-bar statusBar :border='false' color="#fff" fixed :backgroundColor='backgroundColor'>
			<block slot="left">
				<view class="flex-row-flex-start">
					<image class="logo" src="/static/common/logo.png" mode=""></image>
					<view class="topTitle">
						猩猩地堡
					</view>

				</view>
			</block>
		</uni-nav-bar>
		<view class="topView" >
			<view v-if="userinfo.group_id==3" class="content ">
				<view class="flex-row-space-between">
					<view class="timeView flex-column-center1">
						<view class="time">
							上班{{signInfo.work_start.time}}
						</view>
						<view class="status">
							<text v-if="signInfo.work_start.sign_status==0">未打卡</text>
							<text v-if="signInfo.work_start.sign_status==1" style="color: green;">{{signInfo.work_start.sign_time}}已打卡</text>
							<text v-if="signInfo.work_start.sign_status==2" style="color: red;">{{signInfo.work_start.sign_time}}迟到打卡</text>
							<text v-if="signInfo.work_start.sign_status==3" style="color: red;">{{signInfo.work_start.sign_time}}早退打卡</text>
						</view>
					</view>
					<view class="timeView flex-column-center1">
						<view class="time">
							下班{{signInfo.work_end.time}}
						</view>
						<view class="status">
							<text v-if="signInfo.work_end.sign_status==0">未打卡</text>
							<text v-if="signInfo.work_end.sign_status==1" style="color: green;">{{signInfo.work_end.sign_time}}已打卡</text>
							<text v-if="signInfo.work_end.sign_status==2" style="color: red;">{{signInfo.work_start.sign_time}}迟到打卡</text>
							<text v-if="signInfo.work_end.sign_status==3" style="color: red;">{{signInfo.work_start.sign_time}}早退打卡</text>
						</view>
					</view>
				</view>
				<view class="flex-column-center">
					<view @click="buttonClick()" class="daka flex-column-center">
						<view @click="buttonClick()" class="title2">
							签到
						</view>
						<view @click="buttonClick()" class="time1">
							{{currentTime}}
						</view>
					</view>
					<view class="flex-column-center" style="margin-bottom: 20rpx">
						<view v-if="!Number(s)" class="" style="color: red;margin-bottom: 20rpx">
							请扫码签到
						</view>
						
						<view @click="saoClick" class="sao flex-row-center" >
							测试扫一扫
						</view>
					</view>
				
					<view class="address flex-row-center" style="margin-bottom: 60rpx;">
						<uni-icons type="checkbox-filled" color="#52B45D" size="20"></uni-icons>
						<text style="margin-left: 6rpx;">{{userinfo.store_name}}</text>
						
						<!-- <text @click="getLocation()" style="color: #588DFF;margin-left: 20rpx;">刷新</text> -->
					</view>
				</view>
				
			</view>
			
			<view v-else class="">
				<view  class="numView">
					<view @click="timeClick()" class="flex-row-space-between">
						<view class="date">
							{{time}}
							<text class="date1">（{{timeInfo.work_start_time_range2}}-{{timeInfo.work_end_time_range1}}）</text>
							
						</view>
						<picker mode="date" :value="time"  @change="bindDateChange">
												<image class="dateImage" src="/static/index/date.png" mode=""></image>
											</picker>
						
					</view>
					<view class="numView1 flex-row-center">
						<view class="flex-column-center" style="width: 33.33%;" v-for="(item,index) in numList" :key="index">
							<view class="numValue">
								{{item.num}}
							</view>
							<view class="numName">
								{{item.name}}
							</view>
							
						</view>
					</view>
				</view>
				
				<view class="dataView">
					<view  v-if="attendanceData.data.data.length" v-for="(item,index) in attendanceData.data.data" :key="index">
					
						<view class="item flex-row-space-between">
							<view class="">
								<view class="itemName">
									{{item.nickname}}
								</view>
								<view class="itemPhone">
									{{item.mobile}}
								</view>
								<view class="numName">
									所属门店:{{item.store_name}}
								</view>
							</view>
							<view class="">
								<view class="itemStatus">
									{{item.sign_info}}
									<!-- 未完成打卡 -->
								</view>
								<view class="itemTime">
									{{item.create_time| formatTime }}
									<!-- 10:01 -->
								</view>
							</view>
						</view>
						<view v-if="index!=attendanceData.data.data.length-1" class="line">
							
						</view>
					</view>
				</view>
				<view v-if="attendanceData1.data.data.length" class="dataView">
					<view  v-for="(item,index) in attendanceData1.data.data" :key="index">
					
						<view class="item flex-row-space-between">
							<view class="">
								<view class="itemName">
									{{item.nickname}}
								</view>
								<view class="itemPhone">
									{{item.mobile}}
								</view>
							</view>
							<view class="">
								<view class="itemStatus" style="color: #20C23B;">
									{{item.sign_info}}
								</view>
								<view class="itemTime" >
										{{item.create_time| formatTime }}
								</view>
							</view>
						</view>
						<view v-if="index!=attendanceData1.data.data.length-1" class="line">
							
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="" style="height: 200rpx;">
				
			</view>
		</view>
		<u-tabbar v-if="userinfo.group_id==3"  :safeAreaInsetBottom="true" :zIndex='999' activeColor='#157EFE' inactiveColor='#999999' :value="value"
			:fixed="true" :placeholder="true">
			<u-tabbar-item  text="签到" @click="tabbarClick" :name='1'>
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabbar/2.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabbar/1.png"></image>
			</u-tabbar-item>
			<u-tabbar-item  text="记录" @click="tabbarClick" :name='2'>
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabbar/6.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabbar/5.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="tabbarClick" :name='3'>
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabbar/8.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabbar/7.png"></image>
			</u-tabbar-item>
		</u-tabbar>
		<u-tabbar v-else :safeAreaInsetBottom="true" :zIndex='999' activeColor='#157EFE' inactiveColor='#999999' :value="value"
			:fixed="true" :placeholder="true">
			<u-tabbar-item  text="考勤" @click="tabbarClick" :name='1'>
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabbar/4.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabbar/3.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="tabbarClick" :name='3'>
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabbar/8.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabbar/7.png"></image>
			</u-tabbar-item>
		
		</u-tabbar>

	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		sign,
		getSignStatus,
		profile,
		storeInfo,
		attendanceList,
		signTimeInfo
	} from '@/api/index.js'
	export default {
		filters: {
		    formatTime(value) {
		      if (!value) return '';
		      const date = new Date(value);
		      return `${date.getHours()}:${date.getMinutes()}`;
		    }
		  },
		components: {},
		computed: {
			},
		
		data() {
			return {
				signInfo:{},
				s:0,
				t:0,
				n:0,
				sig:0,
				
				timeInfo:{},
				value:1,
				attendanceData:{
					data:{
					data:[]	
					}
				},
				attendanceData1:{
					data:{
					data:[]	
					}
				},
				storeData:{},
				store_id:0,
				time:this.getCurrentDate(),
				userinfo:{},
				list: [1,2,3],
				noList:[1,2],
				numList:[
					{
						name:'总人数',
						num:'46'
					},
					{
						name:'完成',
						num:'45'
					},
					{
						name:'未完成',
						num:'1'
					}
				],
				address:'舞88',
				timer:null,
				currentTime: '',
				title: "",
				backgroundColor: 'ffffff00',
				
				data: {}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#AED0FC"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
			// this.getLocation()
			this.userinfo=uni.getStorageSync('userinfo')
			this.profile()
			this.signTimeInfo()
			
			
		},
		onLoad(e) {
			// this.loadData()
			
			this.updateTime(); // 初始化时间显示
			    this.timer = setInterval(this.updateTime, 1000); // 每秒更新时间
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		// beforeDestroy() {
  //   clearInterval(this.timer); // 清除定时器
  // },
		methods: {
			saoClick(){
				this.s=1
						this.sig="b07a916a4e925f755b54afb5fb86d412"
						this.t=1764061423
						this.n=709236
						this.showToast('可以签到了')
				// 只允许通过相机扫码
				// onlyFromCamera: true,
				// uni.scanCode({
					
				// 	success: function (res) {
				// 		console.log('条码类型：' + res.scanType);
				// 		console.log('条码内容：' + res.result);
				// 		this.s=res.result.s
				// 		this.sig=res.result.sig
				// 		this.t=res.result.t
				// 		this.n=res.result.n
				// 	}
				// });
			},
			bindDateChange(e) {
				this.time = e.detail.value
				this.attendanceList()
			},
			signTimeInfo(){
				var data = {

				}
				signTimeInfo(data).then(res => {
					this.timeInfo=res.data
						
				})
			},
			tabbarClick(e) {
				if (e == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
				if (e == 2) {
					uni.reLaunch({
						url: '/pages/record/record'
					})
				}
				if (e == 3) {
					uni.reLaunch({
						url: '/pages/my/my'
					})
				}
			},
			 getTimeString(dateTimeStr) {
			      const date = new Date(dateTimeStr);
			      return `${date.getHours()}:${date.getMinutes()}`;
			    },
			attendanceList(){
				var data = {
					status:0,
					begin_time:this.time,
					page:1,
					page_size:999,
				}
				attendanceList(data).then(res => {
					this.attendanceData=res.data
					this.numList[0].num=this.attendanceData.stats.total_num
					this.numList[1].num=this.attendanceData.stats.finished_num
					this.numList[2].num=this.attendanceData.stats.unfinished_num
				})
				var data = {
					status:1,
					begin_time:this.time,
					page:1,
					page_size:999,
				}
				attendanceList(data).then(res => {
					this.attendanceData1=res.data
		
				})
			},
			storeInfo(){
				var data = {
					store_id:this.store_id
				}
				storeInfo(data).then(res => {
					this.storeData=res.data
					uni.setStorageSync('storeInfo', this.storeData)
				})
			},
			profile(){
				var data = {
					
				}
				profile(data).then(res => {
					uni.setStorageSync('userinfo', res.data)
					this.userinfo=uni.getStorageSync('userinfo')
					
					if( this.userinfo.group_id==3){
					
						this.getSignStatus()
					}
					else{
						this.store_id=this.userinfo.store_id
						this.storeInfo()
						this.attendanceList()
						 this.timer =null
					}
				})
			},
			getSignStatus(){
				var data = {
					
				}
				getSignStatus(data).then(res => {
					this.signInfo=res.data
				})
			},
			locationRequest(lat,lng){
				var latLng=lat+','+lng
				uni.request({
				    url: 'https://apis.map.qq.com/ws/geocoder/v1/?key=3U7BZ-EHTC5-DYHIN-IEEUQ-PP7Y3-AGF3L&location='+latLng, 
				    data: {
				        
				    },
				    header: {
				       
				    },
				    success: (res) => {
						
			console.log(res.data.result.address)
						this.address=res.data.result.address
						
				    }
				});
			},
			
			getLocation(){
				var that=this
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.locationRequest(res.latitude,res.longitude)
					}
				});
			},
			buttonClick(){
				console.log('打卡',this.s)
				if(!Number(this.s)){
					this.showToast('请扫码签到')
					return
				}
				var data = {
					s:this.s,
					t:this.t,
					n:this.n,
					sig:this.sig,
					sign_address:this.userinfo.store_name,
				}
				sign(data).then(res => {
					this.showToast('签到成功')
					this.getSignStatus()
				})
			},
			 updateTime() {
			      const now = new Date();
			      const hours = now.getHours().toString().padStart(2, '0'); // 补齐为两位数
			      const minutes = now.getMinutes().toString().padStart(2, '0'); // 补齐为两位数
			      const seconds = now.getSeconds().toString().padStart(2, '0'); // 补齐为两位数
			      this.currentTime = `${hours}:${minutes}:${seconds}`;
			    },
			loadData() {

				var data = {
					id: this.id
				}
				forum_list(data).then(res => {
					this.list = res.data.data
				})
			},


		}
	}
</script>

<style lang="scss">
	
	.title {
		margin-top: 80rpx;
		
		text-align: center;
		font-weight: 800;
		font-size: 48rpx;
		line-height: 48rpx;
		font-style: normal;
		text-transform: none;
		color: #163886;
		// background: linear-gradient(90deg, #163886 0%, #00133E 76%);
	}
	.content{
		padding: 36rpx 30rpx;
		margin: 30rpx;
		margin-top: 50rpx;
		padding-bottom: 360rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.timeView{
		width: 301rpx;
		height: 132rpx;
		background: #F5F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

	}
	.time{
		margin-left: 24rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
	.status{
		margin-left: 24rpx;
		margin-top: 10rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #777D84;
	}
	.daka{
		margin-top: 270rpx;
		margin-bottom: 40rpx;
		width: 272rpx;
		height: 272rpx;
		background: linear-gradient( 180deg, #4192F7 0%, #2D6AF6 100%);
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(55,122,227,0.4);
		border-radius:50%;
	}
	.title2{
		font-weight: bold;
		font-size: 40rpx;
		color: #FFFFFF;
	}
	.time1{
		margin-top: 10rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #8EBCFA;
	}
	.address{
		
		width: 100%;
		
		font-weight: 500;
		font-size: 28rpx;
		color: #7C8187;
	}
	.numView{
		padding: 32rpx;
		margin: 30rpx;
		margin-top: 50rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.date{
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.date1{
		font-weight: normal;
		
		font-size: 28rpx;
		color: #666666;
	}
	.dateImage{
		width: 32rpx;
		height: 32rpx;
	}
	.numView1{
		margin-top: 30rpx;
		width: 100%;
		height: 156rpx;
		background: #F7F7FB;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.numValue{
		font-weight: bold;
		font-size: 40rpx;
		color: #222222;
	}
	.numName{
		margin-top: 10rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
	}
	
	.dataView{
		padding:16rpx 32rpx ;
		margin: 30rpx 32rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.item{
		margin: 20rpx 0;
		// height: 146rpx;
	}
	.itemName{
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
	.itemPhone{
		margin-top: 10rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #999999;
	}
	.itemStatus{
		font-weight: 500;
		font-size: 28rpx;
		color: #FF7B00;
	}
	.itemTime{
		text-align: right;
		margin-top: 10rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
	}
	.sao{
		margin-left: 20rpx;
		width: 160rpx;
		height: 60rpx;
		background: #157EFE;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
	}
</style>